<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('关联项目')" prop="dealId">
            <el-select v-model="form.dealId" filterable :disabled="($route.query.id !== undefined && $route.query.id !== null && $route.query.id !== '') || (form.id !== undefined && form.id !== null && form.id !== '') || (form.dealId !== undefined && form.dealId !== null && form.dealId !== '')" :placeholder="$t('关联项目')" @change="changeDeal">
              <el-option
                v-for="dict in dealListOption"
                :key="dict.id"
                :label="$t(dict.dealName)"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('父级文档')" prop="parentId">
            <el-select v-model="form.parentId" :disabled="form.id !== undefined && form.id !== null && form.id !== ''" :placeholder="$t('父级文档')" @change="changeDdBase">
              <el-option :label="$t('无')" value="0" />
              <el-option
                v-for="item in parentOptions"
                :key="item.dirId"
                :label="$t(item.dirName)"
                :value="item.dirId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('文档名称')" prop="dirName">
            <el-input v-model="form.dirName" :placeholder="$t('文档名称')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <div v-if="form.parentId && form.parentId !== '0'">
          <el-col :span="12">
            <el-form-item :label="$t('负责人')" prop="personChargeId">
              <el-select v-model="form.personChargeId" filterable clearable :placeholder="$t('请选择')">
                <el-option
                  v-for="item in personChargeOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('时间')" prop="dateArray">
              <el-date-picker
                v-model="form.dateArray"
                type="datetimerange"
                :start-placeholder="$t('开始日期')"
                :end-placeholder="$t('结束日期')"
                range-separator="/"
                format="yyyy-MM-dd"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('状态')" prop="status">
              <el-select v-model="form.status" filterable :placeholder="$t('请选择')">
                <el-option
                  v-for="dict in statusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </div>
        <el-col :span="12">
          <el-form-item :label="$t('排序')" prop="sort">
            <el-input-number v-model="form.sort" controls-position="right" :placeholder="$t('排序')" :precision="0" :max="10000000" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId && form.parentId !== '0'" :span="24">
          <el-form-item :label="$t('备注')" prop="remark">
            <EditorTxt v-if="!loading" v-model="form.remark" :height="300" :placeholder="$t('备注')" :disabled="!buttonShow" :toolbar-arr="toolbarArr" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--      <FileTable v-if="form.parentId && form.parentId !== '0'" :list.sync="form.fileList" data-type="dataRoom" :business-id="form.dealId" :btn-show="!otherBtnHide" :select-business-data="false" />-->
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <!--      <FormBtn ref="formBtn" :bus-data="form" has-permi="deal:supervise" :menu-key="menuKey" />-->
      <SaveBtn />
    </div>
  </div>
</template>

<script>
import { findDeal } from '@/api/base/deal/dealBase'
import { getDdBase, getDdUserList, listDdBase, saveDdBase } from '@/api/dd/data/ddBase'
import EditorTxt from '@/components/Tinymce/index.vue'
export default {
  components: {
    EditorTxt
  },
  data() {
    return {
      // 菜单标识
      menuKey: 'dd_base',
      // 遮罩层
      loading: false,
      // 是否隐藏其它按钮
      otherBtnHide: false,
      // 操作按钮默认不展示
      buttonShow: true,
      // 项目下拉
      dealListOption: [],
      // 父级文档
      parentOptions: [],
      // 负责人下拉
      personChargeOptions: [],
      // 状态下拉
      statusOptions: [
        { dictLabel: '未开始', dictValue: 'notstart', number: '0', color: 'rgba(255,184,0, 1)', bg: '#fff', border: 'rgba(255,184,0, .3)' },
        { dictLabel: '有风险', dictValue: 'risk', number: '0', color: 'rgba(245,108,108, 1)', bg: '#fff', border: 'rgba(245,108,108, .3)' },
        { dictLabel: '进行中', dictValue: 'ongoing', number: '0', color: 'rgba(64,158,255, 1)', bg: '#fff', border: 'rgba(64,158,255, .3)' },
        { dictLabel: '进度落后', dictValue: 'lag', number: '0', color: 'rgba(255,153,59, 1)', bg: '#fff', border: 'rgba(255,153,59, .3)' },
        { dictLabel: '不适用', dictValue: 'notapply', number: '0', color: 'rgba(144,147,153, 1)', bg: '#fff', border: 'rgba(144,147,153, .3)' },
        { dictLabel: '完成', dictValue: 'done', number: '0', color: 'rgba(103,194,58, 1)', bg: '#fff', border: 'rgba(103,194,58, .3)' }
      ],
      // 表单参数
      form: {
        dateArray: [],
        fileList: []
      },
      // 表单校验
      rules: {
        dealId: [{ required: true, message: this.$t('必填信息'), trigger: 'change' }],
        parentId: [{ required: true, message: this.$t('必填信息'), trigger: 'change' }],
        dirName: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
      },
      toolbarArr: ['searchreplace fontsizeselect  bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat code codesample', 'hr bullist numlist   charmap preview anchor pagebreak table   backcolor fullscreen']
    }
  },
  created() {
    findDeal().then(response => {
      this.dealListOption = response.data
    })
    this.$bus.$emit('async_done')
  },
  methods: {
    // 初始化数据
    init(data) {
      this.loading = true
      this.parentOptions = []
      if (data != null && data.id !== undefined) {
        getDdBase(data.id).then(response => {
          this.form = response.data
          this.getParentSelect(this.form.dealId)
          this.getPersonChargeOptions()
          this.loadDealTack(data.id)
          this.loading = false
        })
      } else {
        this.reset()
        if (this.$route.query.id) {
          this.getParentSelect(this.$route.query.id)
          this.getPersonChargeOptions()
        }
        this.loading = false
      }
    },
    ganttInit(data) {
      this.loading = true
      this.parentOptions = []
      if (data != null && data.id !== undefined) {
        getDdBase(data.id).then(response => {
          this.form = response.data
          this.getParentSelect(this.form.dealId)
          this.getPersonChargeOptions()
          this.loading = false
        })
      } else {
        this.reset()
        this.form.dealId = data.dealId
        this.form.parentId = data.dirId || '0'
        this.getParentSelect(this.form.dealId)
        this.getPersonChargeOptions()
        this.loading = false
      }
    },
    getParentSelect(dealId) {
      listDdBase({ dealId: dealId, parentId: '0' }).then(response => {
        this.parentOptions = response.rows
      })
    },
    getPersonChargeOptions() {
      getDdUserList(this.$route.query.id).then(response => {
        this.personChargeOptions = response.data || []
        this.$forceUpdate()
      })
    },
    changeDeal(val) {
      // 加载父级下拉
      this.form.parentId = '0'
      this.getParentSelect(val)
    },
    changeDdBase(val) {
      if (val === '0') {
        this.form.personChargeId = undefined
        this.form.remark = undefined
        this.form.status = undefined
        this.form.dateArray = []
      } else {
        this.form.status = 'notstart'
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        rowId: undefined,
        dirId: undefined,
        dealId: this.$route.query.id,
        parentId: undefined,
        dirName: undefined,
        personChargeId: undefined,
        directoryId: undefined,
        ddStartDate: undefined,
        ddEndDate: undefined,
        status: 'notstart',
        sort: undefined,
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        dateArray: [],
        fileList: []
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      if (this.$parent.$parent.reset !== undefined) {
        this.$parent.$parent.reset()
      }
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      if (this.$parent.$parent.formOpen !== undefined) {
        this.$parent.$parent.formOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        // 验证数据
        if (valid) {
          // 弹出遮罩层
          this.loading = true
          // 保存数据
          saveDdBase(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              // 关闭form页面
              this.closeForm()
              this.$emit('submitFormEnd', null)
            } else {
              this.msgError(response.msg)
              this.loading = false
            }
          })
        } else {
          this.locationError(document)
        }
      })
    }
  }

}
</script>
